import React from "react";
import {connect} from "react-redux";
import cookie from "react-cookie";
import {fetchPosts, reset} from "../../actions";
import {Link} from "react-router";
import Notifications, {notify} from "react-notify-toast";

class editStaff extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            typeName: "",
            userName: "",
            userAccount: "",
            refresh: true,
            bindingId: "",
            shopNo: "",
            bindingStatus: -1,
            saveUnclickable: "",
            saveDisabled: "",
            deleteUnclickable: "",
            deleteDisabled: "",
            oldUserAccount: "",
            oldUserName: ""
        }
    }

    componentWillMount() {
        document.title = "员工详情"
    }

    componentDidMount() {
        this.props.dispatch(reset("editStaffInfo"));
        this.props.dispatch(reset("updateStaff"));
        this.props.dispatch(reset("deleteStaff"));
        let shopNo = this.props.location.query.shopNo;
        this.setState({
            shopNo: shopNo
        })
    }

    componentWillReceiveProps(nextProps) {
        let editStaffInfo = nextProps.StaffInfo;
        let myColor = {background: '#0E1717', text: "#FFFFFF"};
        if (editStaffInfo != null && this.state.refresh) {
            this.setState({
                userName: editStaffInfo.userName,
                typeId: editStaffInfo.typeId,
                typeName: editStaffInfo.typeName,
                userAccount: editStaffInfo.userAccount,
                refresh: false,
                bindingId: editStaffInfo.bindingId,
                bindingStatus: editStaffInfo.bindingStatus,
                oldUserAccount: editStaffInfo.userAccount,
                oldUserName: editStaffInfo.userName
            });
        }

        if (nextProps.UpdateStaff.errorCode === 0) {
            notify.show("修改员工成功！", "custom", 800, myColor);
            let editedStaffInfo = {
                typeName: this.state.typeName,
                userName: this.state.userName,
                userAccount: this.state.userAccount,
                oldUserName: this.state.userName
            };
            if (this.state.oldUserAccount != this.state.userAccount) {
                let url = "/#/pay/quickResponseCode?qrCodeType=1&bindingId=" +
                    this.state.bindingId + "&shopNo:" + this.state.shopNo;
                setTimeout(function () {
                    window.location.href = url;
                }.bind(this), 1100);
            } else {
                this.setState({
                    saveUnclickable: "",
                    saveDisabled: ""
                });
                cookie.save("editStaffInfo", editedStaffInfo);
            }

        }

        if (nextProps.DeleteStaff.errorCode === 0) {
            notify.show("删除员工成功！", "custom", 800, myColor);
            setTimeout(() => {
                window.location.href = "/#/pay/managementStaff?shopNo=" + this.state.shopNo;
            }, 1100);
        }
    }

    render() {
        if (this.state.bindingStatus == 0) {
            return (
                <div>
                    <Notifications/>
                    <div className="edit-staff-header-container">
                        <div>等待确认...</div>
                        <Link to="pay/quickResponseCode" query={
                            {
                                qrCodeType: 1,
                                bindingId: this.state.bindingId,
                                shopNo: this.state.shopNo
                            }
                        }>
                            <div className="edit-staff-header-container-invite-again"
                                 onClick={this._inviteAgain.bind(this)}>重新邀请
                            </div>
                        </Link>
                    </div>
                    <div className="edit-staff-info-container-parent">
                        <div className="edit-staff-info-container">
                            <div>{this.state.typeName}:</div>
                            <div>
                                <input type="text" value={this.state.userName}
                                       onChange={this._onChangeName.bind(this)}/>
                            </div>
                        </div>
                        <hr className="base-divide-line"/>
                    </div>
                    <div className="edit-staff-info-container-parent">
                        <div className="edit-staff-info-container">
                            <div> 手机:</div>
                            <div><input type="text" value={this.state.userAccount}
                                        onChange={this._onChangePhoneNumber.bind(this)}/></div>
                        </div>
                        <hr className="base-divide-line"/>
                    </div>
                    <div className="edit-staff-button-group">
                        <button style={{background: this.state.saveUnclickable}}
                                disabled={this.state.saveDisabled}
                                onClick={this._saveStaffInfo.bind(this)}>保存
                        </button>
                        <button style={{background: this.state.deleteUnclickable}}
                                disabled={this.state.deleteDisabled}
                                onClick={this._deleteStaffInfo.bind(this)}>删除
                        </button>
                    </div>
                </div>
            );
        } else {
            return (
                <div>
                    <Notifications/>
                    <div className="edit-staff-info-container-parent">
                        <div className="edit-staff-info-container">
                            <div>{this.state.typeName}:</div>
                            <div>
                                <input type="text" value={this.state.userName}
                                       onChange={this._onChangeName.bind(this)}/>
                            </div>
                        </div>
                        <hr className="base-divide-line"/>
                    </div>
                    <div className="edit-staff-info-container-parent">
                        <div className="edit-staff-info-container">
                            <div> 手机:</div>
                            <div><input type="text" value={this.state.userAccount}
                                        onChange={this._onChangePhoneNumber.bind(this)}/></div>
                        </div>
                        <hr className="base-divide-line"/>
                    </div>
                    <div className="edit-staff-button-group">
                        <button
                            style={{background: this.state.saveUnclickable}}
                            disabled={this.state.saveDisabled}
                            onClick={this._saveStaffInfo.bind(this)}>保存
                        </button>
                        <button
                            style={{background: this.state.deleteUnclickable}}
                            disabled={this.state.deleteDisabled}
                            onClick={this._deleteStaffInfo.bind(this)}>删除
                        </button>
                    </div>
                </div>
            );
        }

    }

    _saveStaffInfo() {
        let myColor = {background: '#0E1717', text: "#FFFFFF"};
        if (this.state.userName == '') {
            notify.show("名字不能为空！", "custom", 800, myColor);
            return;
        }
        if (this.state.userAccount == '') {
            notify.show("电话号码不能为空！", "custom", 800, myColor);
            return;
        }
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.state.userAccount))) {
            notify.show("手机号码有误，请重填!", "custom", 800, myColor);
            return;
        }
        if (this.state.userName == this.state.oldUserName &&
            this.state.userAccount == this.state.oldUserAccount) {
            notify.show("员工信息未修改！", "custom", 800, myColor);
            return;
        }
        this.setState({
            saveUnclickable: "#c8c7cc",
            saveDisabled: "disabled"
        });
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("updateStaff"));
        this.props.dispatch(fetchPosts("updateStaff", header, {
            "bindingId": this.state.bindingId,
            "userAccount": this.state.userAccount,
            "userName": this.state.userName
        }))
    }

    _deleteStaffInfo() {
        if (confirm("是否删除员工？")) {
            this.setState({
                deleteUnclickable: "#c8c7cc",
                deleteDisabled: "disabled"
            });
            const header = {"X-Client-ID": "123456"};
            this.props.dispatch(reset("deleteStaff"));
            this.props.dispatch(reset("updateStaff"));
            this.props.dispatch(fetchPosts("deleteStaff", header, {
                "bindingId": this.state.bindingId
            }))
        }
    }

    _inviteAgain() {

    }

    _onChangeName(event) {
        this.setState({
            userName: event.target.value
        });
    }

    _onChangePhoneNumber(event) {
        this.setState({
            userAccount: event.target.value
        });
    }

}

function mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: StaffInfo
    } = {
        isFetching: false,
        items: cookie.load("editStaffInfo") || []
    };
    const {
        items: UpdateStaff
    } = postsByApi["updateStaff"] || {
        items: {}
    };

    const {
        items: DeleteStaff
    } = postsByApi["deleteStaff"] || {
        items: {}
    };
    return {
        StaffInfo,
        UpdateStaff,
        DeleteStaff
    };
}
export default connect(mapStateToProps)(editStaff);